<!-- yunqi002 于 2021/2/23 10:02 创建details.vue (商家详情页)文件 -->
<template>
    <view class="containerd" v-if="this.merchantId">
        <view class="main">
            <view class="header">
                <view class="modal"></view>
                <image class="bg" src="@/static/temp/banner4.jpg"></image>

                <u-row class="search">
                    <u-col span="2" style="text-align: center;margin-top: 5px;z-index: 2" @click="backFun">
                        <u-icon name="arrow-left" color="#fff" size="50"></u-icon>
                    </u-col>
                    <u-col span="8">
                        <u-search v-model="paramObj.smallSpuDto.keyword" shape="round" bg-color="transparent"
                                  height="70"
                                  border-color="#ffffff90" color="#fff" :show-action="false"></u-search>
                    </u-col>
                    <u-col span="2" style="text-align: center;z-index: 2">
                        <u-icon name="more-dot-fill" color="#fff" size="60"></u-icon>
                    </u-col>
                </u-row>
                <u-row class="title">
                    <u-col span="9">
                        <u-row>
                            <u-col :offset="1" span="3" style="text-align: center;">
                                <image class="logo" mode="widthFix"
                                       :src="this.merchantInfo.cmsMemberInfoDto.logo"></image>
                            </u-col>
                            <u-col span="8" class="name">
                                <view>{{this.merchantInfo.nickname}}</view>
                                <view>{{merchantInfo.cmsMemberInfoDto.signFee}}人关注</view>
                            </u-col>
                        </u-row>
                    </u-col>
                    <u-col span="3">
                        <u-button size="mini" class="guanzhu" shape="circle">
                            <u-icon name="heart" color="#fff" size="30"></u-icon>
                            关注
                        </u-button>
                    </u-col>
                </u-row>
                <u-row class="tab">
                    <u-col :offset="1" span="11">
                        <view style="width: 80rpx">
                            <u-tabs :list="list" bg-color="transparent" active-color="#fff" :is-scroll="false"
                                    :current="current" @change="changeTab"></u-tabs>
                        </view>
                    </u-col>
                </u-row>
            </view>

            <view class="content">
                <!--                条件筛选 start-->
                <view class="navbar" :style="{position:headerPosition,top:headerTop}">
                    <view class="nav-item" :class="{current: filterIndex === 0}" @click="tabClick(0)">
                        <text>推荐</text>
                        <view class="p-box">
                            <text :class="{active: termObj[0].status === 0 && filterIndex === 0}"
                                  class="yticon icon-shang"></text>
                            <text :class="{active: termObj[0].status === 1 && filterIndex === 0}"
                                  class="yticon icon-shang xia"></text>
                        </view>
                    </view>
                    <view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
                        <text>销量</text>
                        <view class="p-box">
                            <text :class="{active: termObj[1].status === 0 && filterIndex === 1}"
                                  class="yticon icon-shang"></text>
                            <text :class="{active: termObj[1].status === 1 && filterIndex === 1}"
                                  class="yticon icon-shang xia"></text>
                        </view>
                    </view>
                    <view class="nav-item" :class="{current: filterIndex === 2}" @click="tabClick(2)">
                        <text>价格</text>
                        <view class="p-box">
                            <text :class="{active: termObj[2].status === 0 && filterIndex === 2}"
                                  class="yticon icon-shang"></text>
                            <text :class="{active: termObj[2].status === 1 && filterIndex === 2}"
                                  class="yticon icon-shang xia"></text>
                        </view>
                    </view>
                    <view class="nav-item">
                        <text>筛选</text>
                        <view class="p-box">
                            <text class="yticon icon-shang xia"></text>
                        </view>
                    </view>
                    <text class="cate-item yticon icon-fenlei1" @click="toggleCateMask('show')"></text>
                </view>
                <!--                条件筛选 end-->

                <!--                商品列表 start-->
                <view class="goodItem" v-for="(item,index) in goodArr" :key="'good_'+index" @click="showItem(item.id)">
                    <u-row>
                        <u-col span="3">
                            <image class="goodpic" :src="item.thumb"></image>
                        </u-col>
                        <u-col span="8" :offset="1" class="info">
                            <view class="title" v-text="item.name"></view>
                            <view class="price">￥<span v-text="item.price"></span>
                                <u-icon class="icon" name="shopping-cart" size="40" color="#333"></u-icon>
                            </view>

                        </u-col>
                    </u-row>
                </view>

                <!--                商品列表 end-->


            </view>
        </view>
    </view>
    <view class="containerd" style="height: 60rpx; width: 100%; text-align: center; line-height: 60rpx;" v-else>
        <text>没有任何数据</text>
    </view>
</template>

<script>
    import {requestFun} from '@/utils/requestUtil'
    import {deleteEmptyProperty} from '@/utils/common'

    export default {
        data() {
            return {
                headerPosition: "",
                headerTop: "0px",
                filterIndex: 0,
                priceOrder: 0,
                termObj: [
                    {
                        key: 'tuijian',
                        status: 0
                    }, {
                        key: 'xiaoliang',
                        status: 0
                    }, {
                        key: 'price',
                        status: 0
                    }
                ],
                merchantId: '1335851925446381568',
                merchantInfo: {
                    nickname: '',
                    cmsMemberInfoDto: {
                        logo: ''
                    }

                },
                options: {},
                current: 0,
                list: [
                    {
                        name: '商品'
                    }
                ],
                paramObj: {
                    "index": 1,
                    "smallSpuDto": {
                        "keyword": '',
                        "merchantId": ''
                    },
                    "sort": {
                        "ascFields": [],
                        "descFields": []
                    }
                },
                goodArr: [],
                resObj: {}
            }
        },
        components: {},
        onLoad(options) {
            console.log(options)
            var ts = this
            var merchantId = options.merchantId
            if (merchantId) {
                ts.merchantId = merchantId
            }
            ts.initData();
        },
        // onShow() {
        // 	var ts = this
        // 	ts.initData()
        // },
        methods: {
            // 详情页
            showItem(pid){
                uni.navigateTo({
                    url: "/pages/shop/merchant/mproduct?pid=" + pid,
                    success: res => {
                    },
                    fail: () => {
                    },
                    complete: () => {
                    }
                })
            },
            backFun(){
                uni.navigateBack({//返回
                 delta: 1
                })
            },
            toggleCateMask(type) {
                // 点击条件筛选图标
            },
            tabClick(i) {
                //点击条件筛选
                this.filterIndex = i
                this.termObj[i].status = this.termObj[i].status === 0 ? 1 : 0
                // paramObj
            },
            changeTab(index) {
                this.current = index;
            },
            initData() {
                var ts = this;
                var url = '/api/member/findMember/' + ts.merchantId
                requestFun(url, 'GET', {memberId: ts.merchantId}, res => {
                    if (res.data.code == ts.$code.successCode) {
                        ts.merchantInfo = res.data.data
                        ts.paramObj.smallSpuDto.merchantId = ts.merchantInfo.id
                        ts.findGoodByParam()
                    } else {
                        ts.merchantId = null;
                    }
                }, error => {
                    console.error('请求出错了', error)
                })
            },
            findGoodByParam() {
                var ts = this
                var url = '/api/small/findAll'
                deleteEmptyProperty(ts.paramObj.smallSpuDto)
                requestFun(url, 'POST', ts.paramObj, res => {
                    if (res.data.code == ts.$code.successCode) {
                        ts.resObj = res.data.data
                        ts.goodArr = ts.resObj.result
                    } else {
                        ts.$api.msg(res.data.message)
                    }
                }, error => {
                    console.error('请求出错了', error)
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .containerd {
        background-color: #fff;
        width: 100%;

        .main {
            .header {
                height: 200px;
                position: relative;
                width: 100%;
                z-index: 9;

                .modal {
                    width: 100%;
                    height: 100%;
                    background-color: #000;
                    opacity: 0.6;
                    position: absolute;
                    z-index: 1;
                }

                .bg {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    opacity: 0.9;
                }

                .search {
                    position: absolute;
                    top: 0;
                    width: 100%;
                    z-index: 4;
                    height: 60px;
                    /*background: #ffffff30;*/
                    /*background: #ffffff80;*/
                }

                .title {
                    position: relative;
                    top: -130px;
                    z-index: 3;

                    .logo {
                        margin-left: 8px;
                        height: 100rpx;
                        width: 100rpx;
                    }

                    .name {
                        color: #fff;
                        line-height: 50rpx;

                        view {
                            padding-left: 8px;
                        }

                        view:first-child {
                            font-size: 40rpx;
                        }
                    }

                    .guanzhu {
                        background-color: red;
                        color: #fff;
                        font-size: 30rpx;
                    }
                }

                .tab {
                    z-index: 3;
                    position: relative;
                    top: -120px;

                    .u-tab-item {
                        background: #ffffff50;
                    }
                }

            }

            .content {
                .navbar {
                    /*position: fixed;*/
                    /*top: var(--window-top);*/
                    border-bottom: 1px solid #ddd;
                    left: 0;
                    display: flex;
                    width: 100%;
                    height: 83rpx;
                    background: #fff;
                    box-shadow: 0 2upx 10upx rgba(0, 0, 0, .06);
                    z-index: 10;

                    .nav-item {
                        flex: 1;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: 100%;
                        font-size: 30upx;
                        color: $font-color-dark;
                        position: relative;

                        &.current {
                            color: $base-color;

                            &:after {
                                content: '';
                                position: absolute;
                                left: 50%;
                                bottom: 0;
                                transform: translateX(-50%);
                                width: 120upx;
                                height: 0;
                                border-bottom: 4upx solid $base-color;
                            }
                        }
                    }

                    .p-box {
                        display: flex;
                        flex-direction: column;

                        .yticon {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 30upx;
                            height: 14upx;
                            line-height: 1;
                            margin-left: 4upx;
                            font-size: 26upx;
                            color: #888;

                            &.active {
                                color: $base-color;
                            }
                        }

                        .xia {
                            transform: scaleY(-1);
                        }
                    }

                    .cate-item {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: 100%;
                        width: 80upx;
                        position: relative;
                        font-size: 44upx;

                        &:after {
                            content: '';
                            position: absolute;
                            left: 0;
                            top: 50%;
                            transform: translateY(-50%);
                            border-left: 1px solid #ddd;
                            width: 0;
                            height: 36upx;
                        }
                    }
                }

                .goodItem {
                    border-bottom: 1px solid #ddd;

                    .goodpic {
                        padding: 10rpx;
                        height: 250rpx;
                        width: 250rpx;
                        border-radius: 40rpx;
                    }

                    .info {
                        line-height: 150rpx;

                        .title {
                            line-height: 40rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical
                        }

                        .price {
                            color: red;

                            .icon {
                                margin-top: 50rpx;
                                padding: 10rpx;
                                border: 1px solid #ddd;
                                border-radius: 40rpx;
                                float: right;
                                margin-right: 40rpx;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
